<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="../css/details-infor.css">
	</head>
	<style>
		.qqFace{
			width: 100%;
			position:absolute;
			display:none;
			z-index:1000;
			left: 0;
			bottom: 50px;
			background: #fff;
			left: -0.1%;
		}
	</style>
	<body>
		<header>
			<a href="javascript:history.back(-1)" class="back"><img src="../img/back.png" height="18px"></a>
			<div class="center title">详情信息</div>
		</header>
		<div class="content-wrap">
		<div class="content">
			<div class="flex user">
				<!-- <div><img src="../img/logo.png" width="50px"></div>
				<div>
					<p class="username">小静静</p>
					<p class="girl flex">
						<img src="../img/female-s.png" height="7px"> 23
					</p>
				</div> -->
			</div>
			<div class="dongtai-wrap">
			<!-- <p class="wz">有在南山的朋友吗？</p>
			<div class="flex pic">
				<img src="../img/logo.png">
			</div>
			<div class="flex xs-r">
				<p>0.1km</p>
				<img src="../img/break.png" height="5px" class="break">
				<p>5分钟前</p>
				<img src="../img/break.png" height="5px" class="break">
				<p>1080阅读</p>
			</div>
			<div class="flex xs-r">
				<div class="addlike">
					<img src="../img/like-n.png" height="15px">
					<span>15</span>
				</div>
				<div>
					<img src="../img/comment.png" height="15px">
					<span>6</span>
				</div>
				<div class="chat">
					<img src="../img/chat.png" height="15px">
				</div>
			</div> -->
			</div>
		</div>
		</div>
		<div class="hot">
			<p>热门评论</p>
		<!-- 	<div class="xs">
				<div class="flex">
					<div>
						<img src="../img/logo.png" width="50px">
					</div>
					<div class="hot-r">
						<div class="flex">
							<p class="username">美游新号</p>
							<p class="boy flex">
								<img src="../img/female-s.png" height="7px"> 23
							</p>
						</div>
						<p class="wz flex">听说会弹吉他的女孩子都很美
							<span class="box">
								<img src="../img/like-n.png" class="like">
								<img src="../img/like-s.png">
							</span>
						</p>
						<div class="flex xs-r">
							<p>0.1km</p>
							<img src="../img/break.png" height="5px" class="break">
							<p>5分钟前</p>
						</div>
					</div>
				</div>
			</div>
			<div class="xs">
				<div class="flex">
					<div>
						<img src="../img/logo.png" width="50px">
					</div>
					<div class="hot-r">
						<div class="flex">
							<p class="username">美游新号</p>
							<p class="boy flex">
								<img src="../img/female-s.png" height="7px"> 23
							</p>
						</div>
						<p class="wz flex">听说会弹吉他的女孩子都很美
							<span class="box">
								<img src="../img/like-n.png" class="like">
								<img src="../img/like-s.png">
							</span>
						</p>
						<div class="flex xs-r">
							<p>0.1km</p>
							<img src="../img/break.png" height="5px" class="break">
							<p>5分钟前</p>
						</div>
					</div>
				</div>
			</div> -->
		</div>
		<div class="release">
			<input type="text" name="" id="saytext" placeholder="发布评论">
			<!-- <img src="../img/smile.png" class="emotion"> -->
		</div>
		<input style="display: block;margin: 0 auto;" type="button" value="提交" id="btn">
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/jqqqface.js"></script>
		<script src="../js/jquery.qqFace.js"></script>
		<script src="../layui/layui.all.js"></script>
		<!-- <script src="../js/details-infor.js"></script> -->
	</body>
</html>
<script>
//获取url传来的参数
	 function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
        //接收URL中的参数id
        var dongtaiId = getUrlParam('id');

/*增加评论*/

	$('#btn').click(function () {
		var val=$('#saytext').val();
		var date=new Date();
		var content=val;
		var plUserId=localStorage.getItem("uId");
		var shijian=date.toLocaleString('chinese', { hour12: false });
		var fbUserId=$(this).attr('id');
		var uName=localStorage.getItem("uName");
		var uSex=localStorage.getItem("uSex");
		console.log(val);
		var div='<div class="xs">\n' +
				'<div class="flex">\n' +
				'<div>\n' +
				'<img src="../img/logo.png" width="50px">\n' +
				'</div>\n' +
				'<div class="hot-r">\n' +
				'<div class="flex">\n' +
				'<p class="username">'+uName+'</p>\n' +
				'<p class="boy flex">\n' +
				'<img src="../img/male-s.png" height="7px"> 23\n' +
				'</p>\n' +
				'</div>\n' +
				'<p class="wz flex">'+replace_em(val) +
				'<span class="box">\n' +
				'<img src="../img/like-n.png" class="like">\n' +
				'<img src="../img/like-s.png">\n' +
				'</span>\n' +
				'</p>\n' +
				'<div class="flex xs-r">\n' +
				'<p>0.1km</p>\n' +
				'<img src="../img/break.png" height="5px" class="break">\n' +
				'<p>'+shijian+'</p>\n' +
				'</div>\n' +
				'</div>\n' +
				'</div>\n' +
				'</div>';
			var div2='<div class="xs">\n' +
				'<div class="flex">\n' +
				'<div>\n' +
				'<img src="../img/logo.png" width="50px">\n' +
				'</div>\n' +
				'<div class="hot-r">\n' +
				'<div class="flex">\n' +
				'<p class="username">'+uName+'</p>\n' +
				'<p class="girl flex">\n' +
				'<img src="../img/female-s.png" height="7px"> 23\n' +
				'</p>\n' +
				'</div>\n' +
				'<p class="wz flex">'+replace_em(val) +
				'<span class="box">\n' +
				'<img src="../img/like-n.png" class="like">\n' +
				'<img src="../img/like-s.png">\n' +
				'</span>\n' +
				'</p>\n' +
				'<div class="flex xs-r">\n' +
				'<p>0.1km</p>\n' +
				'<img src="../img/break.png" height="5px" class="break">\n' +
				'<p>'+shijian+'</p>\n' +
				'</div>\n' +
				'</div>\n' +
				'</div>\n' +
				'</div>';

		if (val==''){
			layer.msg('内容不能为空',{icon:5,time:800})
			return false;
		}else {
			$('#saytext').val('');
			$.post('/meiyou/newPinglun/addpinglun',{
				content:content,
				dongtaiId:dongtaiId,
				fbUserId:fbUserId,
				plUserId:plUserId
				
			},function(data){
				console.log(data);
				if(data.code==100){
					layer.msg(data.msg,{icon:6,time:800});
					if(uSex=="男"){
						$('.hot').append(div);
					}else{
						$('.hot').append(div2);
					}
					
					window.location.reload();		
				}
			})
			
		}


	});
	$(function () {
		$('.comment_size').text($('.xs').length);
	});

	$(function() {
		$('.emotion').qqFace({
			id: 'facebox',
			assign: 'saytext',
			path: '../arclist/' //表情存放的路径
		});

	});
	function replace_em(value) {
		value = value.replace(/\</g, '&lt;');
		value = value.replace(/\>/g, '&gt;');
		value = value.replace(/\n/g, '<br/>');
		value = value.replace(/\[em_([0-9]*)\]/g, '<img src="../arclist/$1.gif" border="0" />');
		return value;
	}

//查询用户动态

var userId=localStorage.getItem("uId");
$.post('/meiyou/dongtai/selectDongtaiByDongtaiId',{
		dongtaiId:dongtaiId,
		userId:userId
},function(data){
	console.log(data);
	var data1=data.extend.dongtai.dongTai;
	var data2=data.extend.dongtai.user;
	console.log(data1);
	console.log(data2);
	if(data2.uSex=="男"){
		$('.user').append( "<div><img src='"+data2.uImg+"' width=\"50px\"></div>\n" +
		"<div>\n" +
		"<p class=\"username\">"+data2.uName+"</p>\n" + 
		"<p class=\"boy flex\">\n" +
		"<img src=\"../img/male-s.png\" height=\"7px\">"+data2.uOld +
		"</p>\n" +
		"</div>");
	}else{
		$('.user').append( "<div><img src='"+data2.uImg+"' width=\"50px\"></div>\n" +
		"<div>\n" +
		"<p class=\"username\">"+data2.uName+"</p>\n" +
		"<p class=\"girl flex\">\n" +
		"<img src=\"../img/female-s.png\" height=\"7px\">"+data2.uOld +
		"</p>\n" +
		"</div>");
	}
	
	if(data.extend.dongtai.isdianzan==false){
		$('.dongtai-wrap').append("<p class=\"wz\">"+data1.tContext+"</p>" +
		"<div class=\"flex pic\">" +
		
		"</div>" +
		"<div class=\"flex xs-r\">" +
		"<p>0.1km</p>" +
		"<img src=\"../img/break.png\" height=\"5px\" class=\"break\">" +
		"<p>5分钟前</p>" +
		"<img src=\"../img/break.png\" height=\"5px\" class=\"break\">" +
		"<p>"+data1.tYuedu+"阅读</p>" +
		"</div>" +
		"<div class=\"flex xs-r\">" +
		"<div class=\"addlike\" data-dianzan='"+data.extend.dongtai.isdianzan+"' id='"+data2.uId+"'>" +
		"<img src=\"../img/like-n.png\" height=\"15px\">" +
		"<span>"+data.extend.dongtai.dianzan+"</span>" +
		"</div>" +
		"<div>" +
		"<img src=\"../img/comment.png\" height=\"15px\">" +
		"<span class='pinglun'>"+data.extend.dongtai.pinglun+"</span>" +
		"</div>" +
		"<div class=\"chat\" id='"+data2.uCount+"'>" +
		"<img src=\"../img/chat.png\" height=\"15px\">" +
		"</div>" +
		"</div>");
	}else{
		$('.dongtai-wrap').append("<p class=\"wz\">"+data1.tContext+"</p>" +
		"<div class=\"flex pic\">" +
		
		"</div>" +
		"<div class=\"flex xs-r\">" +
		"<p>0.1km</p>" +
		"<img src=\"../img/break.png\" height=\"5px\" class=\"break\">" +
		"<p>5分钟前</p>" +
		"<img src=\"../img/break.png\" height=\"5px\" class=\"break\">" +
		"<p>"+data1.tYuedu+"阅读</p>" +
		"</div>" +
		"<div class=\"flex xs-r\">" +
		"<div class=\"addlike\" data-dianzan='"+data.extend.dongtai.isdianzan+"' id='"+data2.uId+"'>" +
		"<img src=\"../img/like-s.png\" height=\"15px\">" +
		"<span>"+data.extend.dongtai.dianzan+"</span>" +
		"</div>" +
		"<div>" +
		"<img src=\"../img/comment.png\" height=\"15px\">" +
		"<span class='pinglun'>"+data.extend.dongtai.pinglun+"</span>" +
		"</div>" +
		"<div class=\"chat\" id='"+data2.uCount+"'>" +
		"<img src=\"../img/chat.png\" height=\"15px\">" +
		"</div>" +
		"</div>");
	}
	
	$("#btn").attr('id',data2.uId);
	var img=data1.tImg;
	var imgs=JSON.parse(img);
	console.log(imgs);
	$.each(imgs,function(i,val){
		$('.pic').append("<img src='"+val+"' height='80px' width='80px'>")
	});

});
$.post('/meiyou/newPinglun/selectDongtaiPinglunById',{dongtaiId:dongtaiId},function(data){
	$('.pinglun').text(data.extend.list.length);
});

/*查询所有评论*/
$.post('/meiyou/dongtai/selectPinglunByDongtaiId',{
	dongtaiId:dongtaiId
},function(data){
	console.log(data);
	/*var data1=data.extend.list.newPinglun;
	var data2=data.extend.list.meiyouUser;*/
	if(data.extend.list.length==0){
		$('.hot').append("<div>暂时还没有人评论</div>");
	}else{
		$.each(data.extend.list,function(i,val){
			if(val.meiyouUser.uSex=="男"){
				$('.hot').append('<div class="xs">\n' +
				'<div class="flex">\n' +
				'<div>\n' +
				'<img src="'+val.meiyouUser.uImg+'" width="50px">\n' +
				'</div>\n' +
				'<div class="hot-r">\n' +
				'<div class="flex">\n' +
				'<p class="username">'+val.meiyouUser.uName+'</p>\n' +
				'<p class="boy flex">\n' +
				'<img src="../img/male-s.png" height="7px">'+val.meiyouUser.uOld +
				'</p>\n' +
				'</div>\n' +
				'<p class="wz flex">'+val.newPinglun.content+
				'<span class="box" id="'+val.newPinglun.id+'" data="'+val.newPinglun.dongtaiId+'" data-f="'+val.newPinglun.fbUserId+'" data-p="'+val.newPinglun.plUserId+'">\n' +
				'<img src="../img/like-n.png" class="like">\n' +
				'<img src="../img/like-s.png">\n' +
				'</span>\n' +
				'</p>\n' +
				'<div class="flex xs-r">\n' +
				'<img src="../img/break.png" height="5px" class="break">\n' +
				'<p>'+val.newPinglun.shijian+'</p>\n' +
				'</div>\n' +
				'</div>\n' +
				'</div>\n' +
				'</div>')
			}else{
				$('.hot').append('<div class="xs">\n' +
				'<div class="flex">\n' +
				'<div>\n' +
				'<img src="'+val.meiyouUser.uImg+'" width="50px">\n' +
				'</div>\n' +
				'<div class="hot-r">\n' +
				'<div class="flex">\n' +
				'<p class="username">'+val.meiyouUser.uName+'</p>\n' +
				'<p class="girl flex">\n' +
				'<img src="../img/female-s.png" height="7px">'+val.meiyouUser.uOld +
				'</p>\n' +
				'</div>\n' +
				'<p class="wz flex">'+val.newPinglun.content+
				'<span class="box" id="'+val.newPinglun.id+'" data="'+val.newPinglun.dongtaiId+'" data-f="'+val.newPinglun.fbUserId+'" data-p="'+val.newPinglun.plUserId+'">\n' +
				'<img src="../img/like-n.png" class="like">\n' +
				'<img src="../img/like-s.png">\n' +
				'</span>\n' +
				'</p>\n' +
				'<div class="flex xs-r">\n' +
				'<img src="../img/break.png" height="5px" class="break">\n' +
				'<p>'+val.newPinglun.shijian+'</p>\n' +
				'</div>\n' +
				'</div>\n' +
				'</div>\n' +
				'</div>')
			}
			

		});
	}
});
/*点赞*/
	$(document).on('click','.addlike',function(){
	var fbUserId=$(this).attr('id');
	var dianzanUserId=localStorage.getItem("uId");
	/*var dongtaiId=$(this).parent().attr('id');*/
	var that=$(this);
	var isdianzan=$(this).attr('data-dianzan');
	var num=parseInt($(that).find('span').text());
	if(isdianzan=="false"){
	num=num+1;
	$(that).find('span').text(num)
	console.log(num);
	var that=$(this);
	$.post('/meiyou/newPinglun/addDongtaiDianzan',{
		dongtaiId:dongtaiId,
		fbUserId:fbUserId,
		dianzanUserId:dianzanUserId
	},function(data){
				
		$(that).find('img').attr('src','../img/like-s.png');
		console.log(data);
		layer.msg(data.msg,{icon:6,time:1000},function(){
			window.location.reload();
		})
	});
	}else{
		num=num-1;
		console.log(num);
		$(that).find('span').text(num)
		$.post('/meiyou/newPinglun/quxiaoDongtaiDianzan',{
		dongtaiId:dongtaiId,
		dianzanUserId:dianzanUserId
	},function(data){
		// localStorage.setItem('dongtaidianan',0);
	
		$(that).find('img').attr('src','../img/like-n.png')
		console.log(data);
		layer.msg(data.msg,{icon:6,time:1000},function(){
			window.location.reload();
		})
	});

	}

});
//评论点赞
/*$(document).on('click','.box',function(){
	var id=$(this).attr('id');
	var fbUserId=$(this).attr('data-f');
	var dianzanUserId=$(this).attr('');
	

});*/





$(document).on('click','.chat',function(){

	var toUser=$(this).attr('id');
	 $.post('/meiyou/addFriend',{toUser:toUser},function(data){
        layer.msg(data.msg,{icon:6,time:1000},function(){
			window.location.href='friendsss.html';
		})
      })


});

</script>
